<template>
    <div class="home">
        <home-header class="home-header" :city="city" />
        <home-swiper class="home-swiper" :swiperList="swiperList" />
        <home-catalog  :iconList="iconList"/>
        <home-hot 
            :hotPriseList="hotPriseList" 
            :hotTrendList="hotTrendList"
            :hotContentList="hotContentList"
        />
        <home-weekend :homeWeekList="homeWeekList"/>
        <home-guess :homeGuessList="homeGuessList" />
    </div>
</template>
<script>
import axios from 'axios';
import homeHeader from "@/views/home/components/homeHeader.vue";
import homeSwiper from "@/views/home/components/homeSwiper.vue";
import homeCatalog from "@/views/home/components/homeCatalog.vue";
import homeHot from "@/views/home/components/homeHot.vue";
import homeWeekend from "@/views/home/components/homeWeekend.vue";
import homeGuess from "@/views/home/components/homeGuess.vue";
export default {
    name: 'home',
    components: {
        homeHeader,
        homeSwiper,
        homeCatalog,
        homeHot,
        homeWeekend,
        homeGuess
    },
    data(){
        return {
            city: '北京',
            swiperList: [],
            iconList: [],
            hotPriseList: [],
            hotTrendList: [],
            hotContentList: [],
            homeWeekList: [],
            homeGuessList:[]
        }
    },
    methods: {
        getHomeData() {
            axios.get("/api/index.json").then(this.getHomeDataSucc)
        },
        getHomeDataSucc(res) {
            console.log(res);
        }
    },
    mounted() {
        this.getHomeData()
    }
}
</script>
<style lang="scss" scoped>
.home{
    position :relative;
    .home-header{
        position: absolute;
        top: 0px;
        left: 0px;
        z-index: 100;
        width: 100%;
    }
}
</style>